<template>
  <view class="container">
    <view class="row">
      <view class="icon-item" @click="handleStatus('待付款')">
        <image class="icon" src="@/static/images/待付款.png"></image>
        <text class="text">待付款</text>
      </view>
      <view class="icon-item" @click="handleStatus('待发货')">
        <image class="icon" src="@/static/images/待发货.png"></image>
        <text class="text">待发货</text>
      </view>
      <view class="icon-item" @click="handleStatus('已发货')">
        <image class="icon" src="@/static/images/已发货.png"></image>
        <text class="text">已发货</text>
      </view>
      <view class="icon-item" @click="handleStatus('交易完成')">
        <image class="icon" src="@/static/images/交易完成.png"></image>
        <text class="text">交易完成</text>
      </view>
      <view class="icon-item" @click="handleStatus('我的订单')">
        <image class="icon" src="@/static/images/我的订单.png"></image>
        <text class="text">我的订单</text>
      </view>
    </view>
    <view class="row">
      <view class="icon-item" @click="handleAddress">
        <image class="icon" src="@/static/images/收货人地址.png"></image>
        <text class="text">收货人地址</text>
      </view>
      <view class="icon-item" @click="handleLogout">
        <image class="icon" src="@/static/images/退出登录.png"></image>
        <text class="text">退出登录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    handleStatus(status) {
      console.log(`点击了${status}`);
      // 这里可以添加跳转到对应页面等逻辑
    },
    handleAddress() {
      console.log('点击了收货人地址');
      // 这里可以添加跳转到地址管理页面等逻辑
    },
    handleLogout() {
      console.log('点击了退出登录');
      // 这里可以添加退出登录的逻辑，如清除token等
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 10px;
}
.row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
}
.text {
  font-size: 14px;
  color: #333;
}
</style>